<template>
  <div class="codeSuccess-contail">
    <van-nav-bar class="codeSuccess-header"
                 title="开门结果"
                 @click-left="goBack(-1);">
      <template slot="left">
        <van-icon name="arrow-left"></van-icon>
      </template>
    </van-nav-bar>
    <div class="codeSuccess-icon"
         :class="{'codeSuccess-icon--error':!reuslt}">
      <van-icon :name="reuslt?'passed':'close'"></van-icon>
    </div>
    <p class="codeSuccess-message">
      {{message || '未有相关的提示信息'}}
    </p>
    <div class="codeSuccess-btn">
      <el-button type="success"
                 @click="goIndex">确定</el-button>
      <el-button @click="goBreak">返回</el-button>
    </div>
  </div>
</template>
<script>
import baseCommon from '@/mixins/common.js';

export default {
  mixins: [baseCommon()],
  data() {
    return {
      message: '',
      reuslt: true,
    };
  },
  created() {
    const query = this.$route.query || {};
    this.message = query.message;
    this.reuslt = query.reuslt;
  },
  mounted() {

  },
  computed: {

  },
  methods: {
    goIndex() {
      this.$router.replace({
        path: '/index/main'
      });
    },
    goBreak() {
      this.goBack();
    },
  },
};
</script>
<style lang="scss">
.codeSuccess {
  &-contail {
    text-align: center;
    margin: 40px 0 8px 0;
    background-color: #fff;
  }
  &-icon {
    margin-bottom: 20px;
    color: #19be6b;
    .van-icon {
      color: #19be6b;
      font-size: 70px;
    }
    &--error {
      color: #f56c6c;
      .van-icon {
        color: #f56c6c;
        font-size: 70px;
      }
    }
  }

  &-message {
    margin-bottom: 50px;
    font-size: 24px;
  }
  &-btn {
    width: 90%;
    margin: 0 auto;
    .el-button {
      margin-bottom: 20px;
      width: 100%;
    }
    .el-button+.el-button {
      margin: 0;
    }
  }
}
</style>
